<template>
	<view class="create-list-box">
		<view class="navbar">
			<view class="nav-item" :class="{current: filterIndex === 1}" @click="tabClick(1)">
				销量排序
			</view>
			<view class="nav-item" :class="{current: filterIndex === 2}" @click="tabClick(2)">
				人气排序
			</view>
			<view class="nav-item" :class="{current: filterIndex === 3}" @click="tabClick(3)">
				价格排序
			</view>
		</view>
		<view class="goods-list">
			<view v-for="(item, index) in goodsList" :key="index" class="goods-item">
				<view class="image-wrapper">
					<image
						:src="item.goodsImage==null?'https://file.casugn.com/storecompcard//4T4oGCfkpPX5a59439bdbafef1bd4ed417e476813128_1660543910299.png':item.goodsImage"
						mode="aspectFill"></image>

				</view>
				<view class="btn-wrap">
					<view class="title">
						<text>{{item.goodsName}}</text>
					</view>
					<view class="created-price-box">
						<view class="created-price">
							￥<text>{{item.goodsPrice}}</text>
						</view>
						<view class="created-sale">
							已售:{{item.saleNum}}
						</view>
					</view>

					<view class="created-btn" @tap.stop="toCreateCoupon(item)">
						生成商品券
						<!-- <u-button type="primary" color='linear-gradient(90deg, #4538ff 0%, #79a8ff 100%)'  text="生成商品券" @tap.stop="toCreateCoupon(item)"></u-button> -->
					</view>

				</view>
			</view>
		</view>


		<u-popup :show="popShow" mode="bottom" :round="16" @close="close" closeable="true" closeOnClickOverlay="true"
			class="pop-show">
			<view class="pop-box">
				<u--form labelPosition="left" :model="userInfos" labelWidth="200" :rules="rules">
					<u-form-item label="名称" prop="couponName" borderBottom required class='formItemWp'>
						<u--input v-model="userInfos.couponName" type="text" clearable border="none"
							placeholder='优惠券名称'></u--input>
					</u-form-item>
					<u-form-item label="数量" prop="publishNum" borderBottom required class='formItemWp'>
						<u--input v-model="userInfos.publishNum" type="number" clearable border="none"
							placeholder='优惠券数量'></u--input>
					</u-form-item>
					<u-form-item label="有效期" prop="cycle" borderBottom required class='formItemWp'>
						<u--input v-model="userInfos.cycle" type="number" clearable border="none"
							placeholder='优惠券有效期/天'></u--input>
					</u-form-item>
					<u-form-item label="满减金额" prop="limitQuota" borderBottom required class='formItemWp'>
						<u--input v-model="userInfos.limitQuota" type="number" clearable border="none"
							placeholder='限制金额'></u--input>
					</u-form-item>
					<u-form-item label="满减优惠" prop="publishValue" borderBottom required class='formItemWp'>
						<u--input v-model="userInfos.publishValue" type="number" clearable border="none"
							placeholder='优惠券金额'></u--input>
					</u-form-item>
				</u--form>
				<view class="pop-submit">
					<view class="pop-confirm">
						<u-button @click="couponSubmit" type="primary">生成</u-button>
					</view>
					<!-- <view class="pop-cancle">
						<u-button @click="popShow=false" type="error">取消</u-button>
					</view> -->


				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				needId: '',
				headerPosition: "fixed",
				headerTop: "0px",
				storeId: '',
				goodIds: '',
				filterIndex: 1,
				pageNo: 1,
				pageSize: 10,
				keyword: '',
				total: 0,
				goodsList: [],
				popShow: false,
				openId: '',
				userInfos: {
					id: '',
					goodsIds: '',
					openId: '',
					couponName: '',
					publishNum: '',
					cycle: '',
					limitQuota: '',
					publishValue: '',
					useType: 2,
				},
				rules: {
					couponName: {
						type: 'string',
						required: true,
						message: '请填写优惠券名称',
						trigger: ['blur', 'change']
					},
					publishNum: {
						type: 'number',
						required: true,
						message: '请填写优惠券数量',
						trigger: ['blur', 'change']
					},
					cycle: {
						type: 'number',
						required: true,
						message: '请填写优惠券有效期',
						trigger: ['blur', 'change']
					},
					limitQuota: {
						type: 'number',
						required: true,
						message: '请填写限制金额',
						trigger: ['blur', 'change']
					},
					publishValue: {
						type: 'number',
						required: true,
						message: '请填写优惠券金额',
						trigger: ['blur', 'change']
					},
				},
			}
		},
		onLoad(options) {
			console.log(options)
			// #ifdef H5
			this.headerTop = document.getElementsByTagName('uni-page-head')[0].offsetHeight + 'px';
			// #endif
			if (options.storeId) {
				this.storeId = options.storeId;
				this.goodIds = ''
				this.needId = options.id
				this.getGoodList()
			}
		},
		onReachBottom() {
			if (this.pageNo * 10 > this.total) {
				uni.showToast({
					title: '没有更多数据',
					icon: 'none'
				})
			}
			this.pageNo++
			this.getGoodList()
		},
		onShow() {
			let openId = uni.getStorageSync('openId')
			console.log("这是openId", openId)
			// this.unionId = openId.unionid
			this.openId = openId.openid
		},
		methods: {
			close() {
				this.popShow = false
				this.userInfos.couponName = ''
				this.userInfos.publishNum = ''
				this.userInfos.cycle = ''
				this.userInfos.limitQuota = ''
				this.userInfos.publishValue = ''
			},
			//筛选点击
			tabClick(index) {
				this.filterIndex = index;
				this.pageNo = 1
				this.goodsList = []
				this.getGoodList()
			},
			// 根据storeId获取门店商品信息
			getGoodList() {
				let openId = uni.getStorageSync('openId')
				console.log("这是openId", openId)
				console.log("这是状态", this.filterIndex)
				this.$api.getB2bCShopping(this.storeId, this.filterIndex, this.pageNo, this.pageSize, this.keyword, this
					.goodIds, openId.openid).then(
					res => {
						console.log(res)
						if (res.success) {
							// this.goodsList =[]
							console.log('我的店铺结果', res.result);
							this.goodsList = [...this.goodsList, ...res.result.records]
							this.total = res.result.total
						}
					})
			},
			// 生成商品券
			toCreateCoupon(item) {

				console.log(item)
				this.popShow = true
				this.userInfos.id = this.needId
				this.userInfos.goodsIds = item.goodsId
				this.userInfos.openId = this.openId
			},
			couponSubmit() {
				if (this.userInfos.couponName == '') {
					uni.showToast({
						title: "优惠券名称不能为空！",
						icon: 'none'
					});
					return false
				}
				if (this.userInfos.publishNum == '') {
					uni.showToast({
						title: "优惠券数量不能为空！",
						icon: 'none'
					});
					return false
				}
				if (this.userInfos.cycle == '') {
					uni.showToast({
						title: "优惠券有效期不能为空！",
						icon: 'none'
					});
					return false
				}
				if (this.userInfos.limitQuota == '') {
					uni.showToast({
						title: "限制金额不能为空！",
						icon: 'none'
					});
					return false
				}
				if (this.userInfos.publishValue == '') {
					uni.showToast({
						title: "优惠券金额不能为空！",
						icon: 'none'
					});
					return false
				}
				this.$api.createGoodsCoupon(this.userInfos).then(res => {
					if (res.success) {
						uni.showToast({
							title: "生成优惠券成功！",
							icon: 'none'
						});
						this.popShow = false
					} else {
						uni.showToast({
							title: "生成优惠券失败！",
							icon: 'none'
						});
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.create-list-box {
		// padding: 20upx;
		padding-top: 80upx;

		.navbar {
			position: fixed;
			left: 0;
			top: 0; //暂定为0 
			display: flex;
			width: 100%;
			height: 80upx;
			background: #fff;
			z-index: 10;

			.nav-item {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 176rpx;
				height: 80upx;
				line-height: 80rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Semibold, PingFang SC;
				font-weight: 600;
				color: #1D2129;
				position: relative;

				&.current {
					color: #423BFE;

					&:after {
						content: '';
						position: absolute;
						left: 50%;
						bottom: 0;
						transform: translateX(-50%);
						width: 48upx;
						height: 0;
						border-bottom: 4upx solid #423BFE;
					}
				}
			}

			.p-box {
				display: flex;
				flex-direction: column;

				.yticon {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 30upx;
					height: 14upx;
					line-height: 1;
					margin-left: 4upx;
					font-size: 26upx;
					color: #888;

					&.active {
						color: #423BFE;
					}
				}

				.xia {
					transform: scaleY(-1);
				}
			}

			.cate-item {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100%;
				width: 80upx;
				position: relative;
				font-size: 26upx;

				&:after {
					content: '';
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					border-left: 1px solid #ddd;
					width: 0;
					height: 36upx;
				}
			}
		}

		/* 商品列表 */
		.goods-list {
			display: flex;
			flex-wrap: wrap;
			padding: 32upx;
			background: #fff;

			.goods-item {

				display: flex;
				flex-direction: column;
				width: 48%;
				margin-bottom: 32upx;
				padding-bottom: 20upx;

				&:nth-child(2n+1) {
					margin-right: 4%;
				}

				.image-wrapper {
					width: 333rpx;
					height: 333rpx;
					overflow: hidden;
					margin-top: 0;
					border-radius: 16rpx !important;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.btn-wrap {
					// margin-left: 30upx;
					margin-top: 24rpx;

					.title {
						font-size: 28rpx;
						font-family: PingFang SC-Semibold, PingFang SC;
						font-weight: 600;
						color: #1D2129;
						line-height: 40rpx;
					}

					.created-price-box {
						display: flex;
						justify-content: space-between;
						line-height: 40rpx;
						margin-top: 16rpx;

						.created-price {
							font-size: 24rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #F53F3F;

							text {
								font-size: 28rpx;
							}
						}

						.created-sale {
							font-size: 24rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #86909C;
						}
					}


					.created-btn {
						margin-top: 16upx;
						width: 184rpx;
						height: 48rpx;
						background: #276AEE;
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 48rpx;
						text-align: center;
					}
				}
			}
		}

		// 弹出框
		.pop-box {
			padding: 50upx;

			.pop-submit {
				display: flex;
				justify-content: space-around;
				margin-top: 80upx;

				.pop-confirm {
					width: 686rpx;
					height: 88rpx;
				}

				.pop-cancle {
					width: 200upx;
					margin-left: 20upx;
				}
			}
		}
	}
</style>
